<template>
  <div v-if="!currentUser && show" class="login" @click.stop="hide">
    <div class="item" @click.stop>
      <div class="type">
        <div @click="active = true" :class="{active}">登录</div>
        <div @click="active = false" :class="{active: !active}">注册</div>
      </div>
      <div class="content">

        <div v-if="active">
          <label><input type="text" v-model="login.username" placeholder="请输入用户号码"></label>
          <label><input type="password" v-model="login.password"  placeholder="请输入用户密码"></label>
          <label><input type="text" v-model="login.validate" placeholder="请输入验证码"></label>
          <div class="login-btn" @click="loginAct">登录</div>
        </div>

        <div v-else>
          <label><input type="text" v-model="register.name" placeholder="请输入昵称"></label>
          <label><input type="text" v-model="register.username" placeholder="请输入用户号码"></label>
          <label><input type="password" v-model="register.password" placeholder="请输入用户密码"></label>
          <div class="login-btn" @click="registerAct">注册</div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ProfileLogin',
    props: ['show'],
    computed: {
      currentUser() {
        return sessionStorage.getItem("username")
      }
    },
    created () {
      console.log('----------------------------')
      console.log(this.show)
      console.log(this.$store.state.currentUser)
      console.log(!this.currentUser)
      console.log(!this.currentUser && this.show)
        
    },
    data() {
      return {
        active: true,
        login: {
          username: '',
          password: '',
          validate: ''
        },
        register: {
          username: '',
          password: '',
          name: ''
        },
      }
    },
    methods: {
      hide() {
        this.$emit('hide')
      },
      async loginAct() {
        var {data} = await this.$http.post('http://106.53.76.142:3000/validate', { 
            username: 'root',
            password: '123456'
        })
        if(data.status === 200) {
          this.$toast.show('登录成功', 2000)
          // 保存登录信息在本地
          this.save(this.login)
          // 给与初始金额
          this.$store.commit('login', this.register.username)
          // 清空登录信息
          this.login = {
            username: '',
            password: '',
            validate: ''
          }
          this.$emit('hide')
        } else {
          this.$toast.show(data.msg, 2000)
          this.$store.commit('resetError')
        }
        // this.$store.commit('login', this.login)
        // if(this.$store.state.error) {
        //   this.$toast.show(this.$store.state.error, 3000)
        //   this.$store.commit('resetError')
        // } else {
        //   this.$toast.show('登录成功', 3000)
        //   this.$emit('hide')
        // }
      },
      async registerAct() {
        var {data} = await this.$http.post('http://106.53.76.142:3000/add', { 
            username: 'root',
            password: '123456'
        })
        if(data.status === 200) {
          this.$toast.show('注册成功', 3000)
          // 保存登录信息在本地
          this.save(this.register)
          // 给与初始金额
          this.$store.commit('login', this.register.username)
          // 清空登录信息
          this.register = {
            username: '',
            password: '',
            name: ''
          }
          this.$emit('hide')
        } else {
          this.$toast.show(this.$store.state.error, 3000)
          this.$store.commit('resetError')
        }
        // this.$store.commit('register', this.register)
        // if(this.$store.state.error) {
        //   this.$toast.show(this.$store.state.error, 3000)
        //   this.$store.commit('resetError')
        // } else {
        //   this.$toast.show('注册成功', 3000)
        //   this.$emit('hide')
        // }
      },
      save(info) {
        // console.log('info:' + info)
        sessionStorage.setItem("username", info.username);
        sessionStorage.setItem("password", info.password);
      }
    }
  }
</script>

<style scoped>
  .login {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 11;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
  }
  .item {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    width: 60vw;
    background-color: #fff;
    text-align: center;
    padding: 1rem;
  }
  .type {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid blue;
    padding-bottom: 0.5rem;
  }
  .active {
    color: blue;
  }
  .content input{
    width: 100%;
    margin-top: 0.5rem;
  }
  .login-btn {
    background-color: blue;
    color: #fff;
    padding: 0.3rem 0;
    margin-top: 0.5rem;
  }
</style>